// 基于jq；后面cropper方法因为插件JS导致
$('#image').cropper({
  // 纵横比(宽高比)
  aspectRatio: 1 / 1, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
});


// 原有选择文件按钮 样式不好看，修改不了！隐藏起来！
// 点击样式设置好的那个按钮，触发原来按钮
$("#file_cp").on("click", function() {
  $("#file").click(); // JS代码模拟点击行为
});


// 选择完图片后，打开文件。获取到选择这个文件信息，设置给img;
// 表单：change  
$("#file").on("change", function() {

  // 1.拿到图片信息
  let obj = this.files[0];


  // 2.需要把图片对象 转换为  临时图片地址
  let src = URL.createObjectURL(obj);


  // 3. 设置给 img；主要原因：$('#image')已经经过cropper插件处理 JQ对象；
  $('#image').cropper("replace", src);
});


let layer;
layui.use(['layer'], function() {
  layer = layui.layer;


  // 上传图片：
  $("#up").on("click", function() {


    // 1.把图片转化为Base64图片流
    //      前面：没有任何插件一个 图片信息转换为Base64图片流
    //      现在：$('#image')已经被插件处理，获取Base64图片流方法使用插件提供
    let canvas = $('#image').cropper('getCroppedCanvas', {
      width: 100,
      height: 100
    });
    let base64 = canvas.toDataURL('image/png');



    //  2.提交数据
    $.ajax({
      url: "/my/update/avatar",
      type: "POST",
      data: {
        avatar: base64
      },
      success: function(res) {
        layer.msg(res.message);
        window.parent.getInfo();
      }
    });










  });
});